<template>
  <map 
    :longitude="longitude" 
    :latitude="latitude" 
    :markers="markers" 
    :style="{ height: mapHeight + 'px', width: mapWidth+'px'}"
  >
    <cover-view class="store-title" @click="goToShopList">附近门店</cover-view>
  </map>

  <!-- 底部信息卡片 -->
  <view class="info-card">
    <view class="card-header">
      <text class="shop-name">伟业汽车保养场（人民路店）</text>
      <view class="rating-box">
        <uni-rate :value="3" size="14" color="#bbb" active-color="#ffd21e"/>
        <text class="distance">44m</text>
      </view>
    </view>

    <view class="detail-info">
      <view class="info-item">
        <uni-icons type="calendar" size="16" color="#666"/>
        <text class="info-text">营业时间：周一至周五 09:00-22:00</text>
      </view>
      <view class="info-item">
        <uni-icons type="location-filled" size="16" color="#666"/>
        <text class="info-text">山阳区人民中路32号</text>
      </view>
    </view>

    <view class="action-buttons">
      <button class="btn contact" @click="showContactModal = true">联系门店</button>
      <button class="btn booking" @click="goToDetail">立即预定</button>
    </view>
  </view>

  <!-- 联系电话弹出框 -->
  <view v-if="showContactModal" class="modal-overlay" @click="showContactModal = false">
    <view class="modal-content" @click.stop>
      <text class="phone-number">18893029302</text>
      <button class="call-btn" @click="makeCall">呼叫</button>
      <button class="cancel-btn" @click="showContactModal = false">取消</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const QQMapWX = require('../../../static/qqmap-wx-jssdk.min.js');
const longitude = ref();
const latitude = ref();
const markers = ref([]);
const mapHeight = ref();
const mapWidth=ref();
const showContactModal = ref(false);
var qqmapsdk;

const goToDetail=()=>{
	console.log("xiangqing")
	uni.navigateTo({
		url:'/pages/baoyang/detail/detail'
	})
}


const goToShopList = () => {
  uni.navigateTo({
    url: '/pages/baoyang/list/list'
  });
};

// 拨打电话
const makeCall = () => {
  uni.makePhoneCall({
    phoneNumber: '18893029302'
  });
  showContactModal.value = false;
};



onMounted(() => {
  // 获取窗口尺寸
  uni.getSystemInfo({
    success(res) {
      mapHeight.value = res.windowHeight * 0.6;
      mapWidth.value = res.windowWidth;
    }
  });

  // 初始化地图SDK
  qqmapsdk = new QQMapWX({
    key: 'UP5BZ-RD7CT-MWCX2-VGJHO-4NPQQ-NFFZH',
  });

  // 获取定位并搜索
  uni.getLocation({
    type: 'wgs84',
    success: (res) => {
      // 更新定位数据
      longitude.value = res.longitude;
      latitude.value = res.latitude;

    // 添加当前位置的蓝色标记
      const currentLocationMarker = {
        id: 9999, // 使用唯一ID
        latitude: res.latitude,
        longitude: res.longitude,
		label: {
		    content: '我的位置',
		    color: '#007AFF',
		    fontSize: 12,
		    borderRadius: 4,
		    bgColor: '#FFFFFF',
		    padding: 8,
		    display: 'ALWAYS'
		  }
        // iconPath: '/static/blue_marker.png', // 蓝色标记图片
        // width: 24,
        // height: 24,
        // title: '我的位置',
        // customCallout: {
        //   display: 'ALWAYS',
        //   content: '当前位置'
        // }
      };

      // 执行周边搜索
      qqmapsdk.search({
        keyword: '汽车维修',
        location: {
          latitude: res.latitude,
          longitude: res.longitude
        },
        radius: 5000,  // 搜索半径5公里
        page_size: 10, // 显示10个结果
success: (searchRes) => {
   markers.value = [
     currentLocationMarker,
     ...searchRes.data.map(item => ({
       id: Number(item.id),
       title: item.title,
       latitude: item.location.lat,
      longitude: item.location.lng,
       iconPath: "/resources/my_marker.png",
       width: 24,
       height: 24
     }))
   ];
 }
      });
    },
    fail: () => {
      uni.showToast({
        title: '定位失败，使用默认位置',
        icon: 'none'
      });
    }
  });
});
</script>

<style>
/* 固定cover-view标题 */
.store-title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 16px;
  z-index: 99;
}

/* 信息卡片 */
.info-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  padding: 20px;
}

.card-header {
  margin-bottom: 15px;
}

.shop-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.rating-box {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.distance {
  margin-left: 10px;
  color: #999;
  font-size: 12px;
}

.detail-info {
  padding: 10px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.info-item {
  display: flex;
  align-items: center;
  margin: 12px 0;
}

.info-text {
  margin-left: 8px;
  color: #666;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s;
}

.contact {
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #333;
}

.booking {
  background: #3e85ff;
  color: #fff;
  border: none;
}

/* 弹出层遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 弹出内容框 */
.modal-content {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  text-align: center;
}

.phone-number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  display: block;
}

.call-btn {
  width: 100%;
  background: #3e85ff;
  color: #fff;
  padding: 12px 0;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  margin-bottom: 8px;
}

.cancel-btn {
  width: 100%;
  background: #fff;
  color: #333;
  padding: 12px 0;
  font-size: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
</style>
